<template>
	<!-- <view class="flex center header padding30"
		:style="{'padding-top': `${headerSafe || 44}rpx`, background: bgColor, 'min-height': (minH || 0) * 2 + 'rpx', color: color }"> -->
	<view class="flex center header" :style="{background: bgColor,'padding-top': `${headerSafe || 44}rpx`, 'padding-right': `padRight`}">
		<slot name="search" v-if="searchStatus"></slot>
		<view v-else class="header-content"
				:class="[
					titPosition == 'right' ? 'tit-lt' : (titPosition == 'left' ?  (!back && !backOpBg ? 'tit-lr2' : 'tit-lr') : '')
			]">
			<view v-if="back" class="flex center icon-back" @click="goBack()" :style="{'margin-top': `${headerSafe/2 || 22}rpx`}">
				<u-icon name="arrow-left" size="18" :color="color"></u-icon>
			</view>
			<view v-if="backOpBg" class="flex center icon-back icon-back-bg" @click="goBack()" :style="{'margin-top': `${headerSafe/2 || 22}rpx`}">
				<u-icon name="arrow-left" size="14" color="#fff"></u-icon>
			</view>
			<view class="shop-name" v-if="shopName" :style="{'margin-top': `${headerSafe/2 || 22}rpx`}">
				<slot name="shop-name"></slot>
			</view>
			<view v-if="title" class="flex center">
				<view class="city-input">
					<text class="city" :style="{color: titleColor, fontSize: titleSize}">{{ title }}</text>
				</view>
			</view>
			
			<view class="btn-lt" :style="{'margin-top': `${headerSafe/2 || 22}rpx`, 'margin-right': padRight }">
				<slot name="btnLt"></slot>
			</view>
		</view>
	
	</view>
</template>

<script>
import { getSystemInfo } from '@/utils/utils'
	export default {
		props: {
			title: {
				type: String,
				default: ''
			},
			bgColor: {
				type: String,
				default: '#fff'
			},
			color: {
				type: String,
				default: '#000'
			},
			back: {
				type: Boolean,
				default: false
			},
			backOpBg: {
				type: Boolean,
				default: false
			},
			titPosition: {
				type: String,
				default: 'center'
			},
			backUrl: {
				type: String,
				default: ''
			},
			shopName: {
				type: Boolean,
				default: false
			},
			searchStatus: {
				type: Boolean,
				default: false
			},
			titleColor: {
				type: String,
				default: '#000'
			},
			titleSize: {
				type: String,
				default: '36rpx'
			}
		},
		data() {
			return {
				headerSafe: 44,
				padRight: 0,
				minH: 0
			}
		},
		mounted() {
			const { headerSafe, minH, padRight } = getSystemInfo()
			this.headerSafe = headerSafe
			this.minH = minH
			this.padRight = padRight
		},
		methods: {
			goBack() {
				if (this.backUrl) {
					uni.redirectTo({ url: this.backUrl });
				} else {
					if (getCurrentPages().length <= 1) {
						uni.reLaunch({ url: '/pages/main?url=0' });
					} else {
						uni.navigateBack();
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		width: 100%;
		min-height: 88rpx;
		// padding-bottom: 10rpx;
		position: relative;
		z-index: 500;

		.margin32 {
			margin: 0 32rpx;
		}

		.search {
			width: 100%;
			position: relative;
		}

		.header-content {
			width: 100%;
			padding:20rpx 0;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.shop-name {
			position: absolute;
			left: 90rpx;
			top: 50%;
			transform: translateY(-50%);
		}

		.btn-lt {
			position: absolute;
			right: 0;
			top: 50%;
			transform: translateY(-50%);
		}

		.tit-lr {
			justify-content: flex-start;
			padding-left: 72rpx;
		}

		.tit-lr2 {
			justify-content: flex-start;
			padding-left: 32rpx;
		}

		.tit-lt {
			justify-content: flex-end;
			padding-right: 72rpx;
		}

		.city,
		.clock-icon {
			flex-shrink: 0;
			font-weight: 600;
			color: $uni-text-color;
			font-size: 36rpx
		}

		.icon-expand {
			margin-left: 6rpx;
		}

		.clock-icon {
			width: 72rpx;
			height: 72rpx;
		}

		.search {
			// width: 100%;
			// position: relative;
			// background: $uni-bg-color;
			// border-radius: 50rpx;
			// height: 72rpx;
			// padding: 0 24rpx 0 30rpx;
			// font-weight: 500;
			// color: $uni-text-color-grey;

			// i {
			// 	color: $uni-text-color;
			// }
		}

		.icon-back {
			position: absolute;
			left: 32rpx;
			top: 50%;
			transform: translateY(-50%);
		}
		
		.icon-back-bg {
			background: rgba(0,0,0,0.2);
			border-radius: 50%;
			padding: 4rpx;
			box-sizing: border-box;
		}

		.city-input {
			flex-shrink: 0;
		}

		.search-back {
			position: relative;
			margin-left: -30rpx;
			z-index: 1;
		}

		.search-input {
			height: 72rpx;
			background: #F5F5F5;
			border-radius: 50rpx;
			position: relative;
			margin: 0 20rpx 0 8rpx;
			padding-left: 20rpx;
			box-sizing: border-box;
			width: 100%;
		}

		.input-icon {
			color: $uni-text-color-grey;
			margin-right: 10rpx;
		}

		.search-btn {
			font-weight: 500;
			color: $uni-text-color-grey;
			flex-shrink: 0;
		}
	}
</style>